<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="../js/editAccount.js"></script>
    <script>
        $(function () {
            $('.codeLine').hide();
            $('#unResetPhone').hide();
            $('#phone').attr('disabled',true);

            $('#resetPhoneButton').on('click', function () {
                $('#phone').attr('disabled',false);
                $('#resetPhone').hide();
                $('#unResetPhone').show();
                $('.codeLine').show();
            });

            $('#unResetPhoneButton').on('click', function () {
                $('#phone').attr('disabled',true);
                $('#resetPhone').show();
                $('#unResetPhone').hide();
                $('.codeLine').hide();
            });

            $('#send').on('click', function () {
                $('#phone').attr('disabled',true);
                $('#resetPhone').show();
                $('#unResetPhone').hide();
                $('.codeLine').hide();
            });
        });
    </script>
    <script src="../js/accountFields.js"></script>
</head>
<body>

<div th:replace="common/top"></div>

<div id="Catalog">
    <form action="editAccount" method="post">

        <div th:if="${editMsg != null}">
                <span style="color:#1e90ff " th:text="${editMsg}">
                </span>
        </div>

        <h2>用户信息</h2>
        <table id="accountForm">
            <tr>
                <td>账号:</td>
                <td th:text="${session.account?.username}"></td>
            </tr>
            <tr>
                <td>新密码:</td>
                <td>
                    <input type="password" name="password" id="newPassword"><br/>
<!--                    <span class="error-msg" th:text="${msg_password}"></span>-->
                    <div id="newPasswordMsg"></div>
                </td>
            </tr>
            <tr>
                <td>再次输入:</td>
                <td>
                    <input type="password" name="repeatedPassword" id="repeatNewPassword"><br/>
<!--                    <span class="error-msg" th:text="${msg_repeated_password}"></span>-->
                    <div id="repeatNewPasswordMsg"></div>
                </td>
            </tr>
        </table>

        <h2>绑定手机</h2>
        <table>
            <tr>
                <td>电话:</td>
                <td>
                    <input type="text" size="40"
                           id="phone" name="account.phone"
                           th:value="${session.account?.phone}"/><br/>
                    <div id="phoneMsg" class="error-msg" style="color: red"
                         th:text="${session.msg_phone}"></div>
                </td>
                <td id="resetPhone">
                    <input type="button" id="resetPhoneButton" value="点击修改"/>
                </td>
                <td id="unResetPhone">
                    <input type="button" id="unResetPhoneButton" value="取消修改"/>
                </td>
            </tr>

            <tr class="codeLine">
                <td>验证码:</td>
                <td>
                    <input type="text" size="40"
                           name="code" id="code" /><br/>
                    <div id="codeMsg" class="error-msg" style="color: red"
                         th:text="${session.msg_code}"></div>
                </td>
                <td>
                    <input type="button" id="send" class="send"
                           formaction="/sendCode2"
                           onclick="return CheckPhone();"
                           value="点击发送"/>
                </td>
            </tr>

            <tr class="codeLine">
                <td>
                    <input type="button" id="checkCode" class="checkCode"
                           formaction="/checkCode"
                           value="确认密保手机"/>
                </td>
            </tr>
        </table>

        <div th:replace="account/accountFields"></div>

        <br>
        <br>
        <input type="submit" name="editAccount" value="保存所有信息"/>
    </form>
    <br>
    <br>
    <a th:href="@{listOrders(username=${session.account?.username})}">我的订单</a>
</div>
<br>
<br>

<div th:replace="common/bottom"></div>

</body>
</html>